<template>
   <ContentWrap v-loading="formLoading">

    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="类型名称" prop="typeName">
        <el-input v-model="formData.typeName" placeholder="请输入类型名称" />
      </el-form-item>
     
      <el-form-item label="是否可见" prop="visible">
        <el-radio-group v-model="formData.visible">
          <el-radio  :key="dict.value"
          :label="dict.value" v-for="dict in getIntDictOptions(DICT_TYPE.IS_NO)">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="显示顺序" prop="sort">
        <el-input-number v-model="formData.sort" :min="0" placeholder="请输入显示顺序" />
      </el-form-item>
      <el-form-item label="分数" prop="score">
        <el-input-number  controls-position="right" :min="0" v-model="formData.score" placeholder="请输入分数" />
      </el-form-item>
    </el-form>
   <el-form>
      <el-form-item style="float: right">
        <el-button  :loading="formLoading" type="primary" @click="submitForm">
          保存
        </el-button>
        <el-button @click="close">返回</el-button>
      </el-form-item>
    </el-form>
    </ContentWrap>

</template>
<script setup lang="ts">
import { ComplainTypeApi, ComplainTypeVO } from '@/api/wine/complaintype'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useTagsViewStore } from '@/store/modules/tagsView'

/** 投诉信息类型 表单 */
defineOptions({ name: 'ComplainTypeForm' })
const { push, currentRoute } = useRouter() // 路由
const { params } = useRoute() // 查询参数
const { delView } = useTagsViewStore() // 视图操作
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  typeName: undefined,
  visible: false,
  sort: 0,
  score: undefined
})
const formRules = reactive({
  typeName: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
  visible: [{ required: true, message: '请选择是否可见', trigger: 'change' }],
  sort: [{ required: true, message: '请选择显示顺序', trigger: 'sort' }],

})
const formRef = ref() // 表单 Ref
  const id = params.id as unknown as number

// const submitForm = async () => {
//   dialogVisible.value = true
//   resetForm()
//   // 修改时，设置数据
//   if (id) {
//     formLoading.value = true
//     try {
//       formData.value = await ComplainTypeApi.getComplainType(id)
//     } finally {
//       formLoading.value = false
//     }
//   }
// }

const getDetail= async()=>{
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ComplainTypeApi.getComplainType(id)
    } finally {
      formLoading.value = false
    }
  }
}
onMounted(async () => {
  await getDetail()
})
/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  
  try {
    const data = formData.value as unknown as ComplainTypeVO
    if (!id) {
      await ComplainTypeApi.createComplainType(data)
      message.success(t('common.createSuccess'))
    } else {
      await ComplainTypeApi.updateComplainType(data)
      message.success(t('common.updateSuccess'))
    }
   close()
  } finally {
    formLoading.value = false
  }
}
/** 关闭按钮 */
const close = () => {
  delView(unref(currentRoute))
  push({ name: 'ComplainType' })
}

// /** 重置表单 */
// const resetForm = () => {
//   formData.value = {
//     id: undefined,
//     typeName: undefined,
//     visible: undefined,
//     sort: 0,
//     score: undefined
//   }
//   formRef.value?.resetFields()
// }
</script>